<{include file="top.html" }>
<link href="<{$preStaticUrl}>Wap/css/photoswipe.css" rel="stylesheet" />
<link href="<{$preStaticUrl}>Wap/css/default-skin.css" rel="stylesheet" />
</head>
<script src="<{$preStaticUrl}>Wap/js/float_zxx.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var joinStatus = "<{$info.joinStatus}>";
        var isPay = "<{$info.isPay}>";
        var joinStatusHtml = "<{$info.joinStatusHtml}>";

        $("#status").html($(".hd_btn").html());

        if($("#status").html() == "去报名"){
            $("#status").html("去报名").attr('href',"<{u('events/apply')}>&id=<{$info.id}>").css('background-color','#4fd0c2');
        } else if($("#status").html() == joinStatusHtml && joinStatus && isPay != 0){
            $("#status").attr('href',"<{u('order/pay')}>&id=<{$info.isPay}>");
        } else if($("#status").html() == "已报名" || $("#status").html() == "候选"){
            <!--
            $("#status").html("取消报名").attr('href',"javascript:cancelApply()").css('background-color','#D1C0A5');
            -->
            $("#status").html("已报名").attr('href',"javascript:void(0)").css('background-color','#D1C0A5');
        } else if($("#status").html() == "取消报名"){
            $("#status").html("去报名").attr('href',"javascript:void(0)").css('background-color','#ccc');
        }
        else {
            $("#status").attr('href',"javascript:void(0)");
        }

    });
    function checkTask(e,i){
        var param = {id:i};
        $.getJSON("<{U('Events/checkUserTask')}>",param,function(data){
//            console.log(data);
            if(data.status ==1){
                layer.msg(data.msg);
                return false;
            }else if(data.status == 2){
                var len = data.data.length;
                for(var i=0;i<len;i++){
                    alert("您的“"+data.data[i]+"”活动作业未提交，请先提交作业");
                }
                return false;
            } else{
                var url = $(e).attr("href");
                window.location.href= url;
                return true;
            }
        });
    }

    function switchInfMenu(){
        var div1 = document.getElementById('close');
        var div2 = document.getElementById('open');
        if(div1.style.display == '' || div1.style.display == 'block'){
            div1.style.display = "none";
            div2.style.display = "block";
        }else{
            div1.style.display = "block";
            div2.style.display = "none";
        }
    }

    function cancelApply(){
        $("#cancelApply").css("display","block");
    }
    /**
     * 文本框根据输入内容自适应高度
     * @param                {HTMLElement}        输入框元素
     * @param                {Number}                设置光标与输入框保持的距离(默认0)
     * @param                {Number}                设置最大高度(可选)
     */
    var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
                isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
                addEvent = function (type, callback) {
                    elem.addEventListener ?
                            elem.addEventListener(type, callback, false) :
                            elem.attachEvent('on' + type, callback);
                },
                getStyle = elem.currentStyle ? function (name) {
                    var val = elem.currentStyle[name];

                    if (name === 'height' && val.search(/px/i) !== 1) {
                        var rect = elem.getBoundingClientRect();
                        return rect.bottom - rect.top -
                                parseFloat(getStyle('paddingTop')) -
                                parseFloat(getStyle('paddingBottom')) + 'px';
                    };

                    return val;
                } : function (name) {
                    return getComputedStyle(elem, null)[name];
                },
                minHeight = parseFloat(getStyle('height'))+10.4;

        elem.style.resize = 'none';

        var change = function () {
            var scrollTop, height,
                    padding = 0,
                    style = elem.style;

            if (elem._length === elem.value.length) return;
            elem._length = elem.value.length;

            if (!isFirefox && !isOpera) {
                padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
            };
            scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            elem.style.height = minHeight + 'px';
            if (elem.scrollHeight > minHeight) {
                if (maxHeight && elem.scrollHeight > maxHeight) {
                    height = maxHeight - padding;
                    style.overflowY = 'auto';
                } else {
                    height = elem.scrollHeight - padding;
                    style.overflowY = 'hidden';
                };
                style.height = height + extra + 'px';
                scrollTop += parseInt(style.height) - elem.currHeight;
                //document.body.scrollTop = scrollTop;
                //document.documentElement.scrollTop = scrollTop;
                elem.currHeight = parseInt(style.height);
            };
        };

        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
    };
</script>

<body>
<header><a class="left_link" href="javascript:void(0);"></a>活动详情</header>
<div class="jfdh_box">
    <div class="jfdh_topic"><{$info.title}><{if $info.userlevel}><span class="dj jk_dj">lv.<{$info.userLevelHtml}></span><{/if}></div>
    <{if $info.firstEndTime}>
    <div class="rq-bm-box-time" style="top:7.5rem;"><{$info.firstEndTime}></div>
    <{/if}>
    <div class="jfdh_img"><img src="<{$preuploadcurl}><{$info.imgList}>" /></div>
    <div id="fixed" class="buy-box clearfix" style="z-index: 1000;">
        <{if $info.joinStatus}>
            <{if $info.isPay == 0}>
                <div class="hd_btn yrx_ybm_2" style="display: none"><{$info.joinStatusHtml}></div>
            <{else}>
                <div class="hd_btn qbm_2" style="display: none"><a class="qbm_2 " href="<{u('order/pay')}>&id=<{$info.isPay}>"><{$info.joinStatusHtml}></a></div>
            <{/if}>
        <{else}>

            <{if $info.applyEndTime>$smarty.now}>
                <{if $info.model == 'first' && $info.applyCount>=$info.places}>
                    <div class="hd_btn yjs_2" style="display: none">已结束</div>
                <{else}>
                    <{if $info.applyStartTime>$smarty.now }>
                        <div class="hd_btn yrx_ybm_2" style="display: none">即将开始</div>
                    <{else}>
                        <div class="hd_btn qbm_2" style="display: none"><a class="qbm_2 " href="<{if $info.jumpMode eq 2}><{$info.jumpURL}><{else}><{u('events/apply')}>&id=<{$info.id}><{/if}>" onclick="checkTask(this,'<{$info.id}>');return false">去报名</a></div>
                    <{/if}>
                <{/if}>
            <{else}>
                <div class="hd_btn yjs_2" style="display: none">已结束</div>
            <{/if}>

        <{/if}>
        <div class="num" style="padding: 0 -.5rem;">
            <span class="ActivityPlaces" >活动名额：<span class="rmb-num"><{if $info.places == 0}>不限<{else}><{$info.places}><{/if}></span></span>
        </div>
        <br/>
        <{if $info.showPay}>
            <div class="price">
                <span class="RequiredFee" >所需费用：<span class="rmb-num"><{$info.showPay}></span></span>
            </div>
        <{/if}>
        <br/>
        <{if $info.point}>
            <div class="price">
                <span class="RequiredPoint" >所需积分：<span class="rmb-num"><{$info.point}>积分</span></span>
            </div>
        <{/if}>
        <div class="num">
            <span class="SignBy" >报名截至：<span class="rmb-num"><{$info.applyEndTime|date_format:"%Y-%m-%d %H:%M"}></span></span>
        </div>

    </div>
</div>
<div class="address_time">
    <div class="address_box">活动时间：<{$info.showListTime}></div>
    <div class="time_box">活动地址：<{$info.location}></div>
</div>
<ul class="man_nub">
    <{if $info.joinMemberBeCount>0}>
        <li>已有<span><{$info.joinMemberBeCount}></span>人入选</li>
        <li>
            <a href="<{u('events/applylog')}>&type=2&id=<{$info.id}>">
                <{foreach from=$info.joinMemberBe item=item key=key}>
                    <{if $key < 5}>
                        <span><img class="uhead" src="<{$item.uid|headpic}>" /></span>
                    <{/if}>
                <{/foreach}>
            </a>
        </li>
    <{/if}>
    <{if $info.applyCount>0}>
        <li>已有<span><{$info.applyCount}></span>人报名</li>
        <li>
            <a href="<{u('events/applylog')}>&type=1&id=<{$info.id}>">
                <{foreach from=$info.joinMember item=item key=key}>
                    <{if $key < 5}>
                        <span><img class="uhead" src="<{$item.uid|headpic}>" /></span>
                    <{/if}>
                <{/foreach}>
            </a>
        </li>
    <{/if}>
</ul>
<div class="hdxq_box" style="margin-top: 1rem;">
    <div class="hdxq_topic">活动详情</div>
    <div class="hdxq_con" id="close">
        <div class="sqnr_con"><{$info.content}></div><!--收起内容-->
        <{* <div class="anniu" onclick="javascript:switchInfoMenu();">点击收起详情</div> *}>
    </div>
    <div class="hdxq_con" id="open" style="display:none;">
        <div class="anniu" onClick="javascript:switchInfoMenu();">点击展开详情</div>
    </div>
</div>
<{if $data}>
    <div class="share">
        <div class="title_topic">用户分享</div>
        <div id="closeShare">
            <{foreach from=$data item=item key=key}>
                <div class="share_trends clearfix">
                    <img src="<{$item.uid|headpic}>" />
                    <h3 style="line-height:3.5rem;"><{$item.nickname}><span><{$item.addTime|date_format:"%Y-%m-%d %H:%M"}></span></h3><br>
                    <article style="display:block; margin-left:0; width:100%;">
                        <p class="share_con"><{$item.content}></p>
                        <div class="clearfix" style="padding-bottom:1rem;">
                            <{if $item.imgList}>
                                <span class="gallery FeelImg">
                                    <{foreach from=$item.imgList item=list key=k}>
                                        <a class="galleryAAAA" href="<{$list}>" data-size="100x100" data-med="<{$list}>" data-med-size="288x158">
                                            <img src="<{$list}>" alt="">
                                        </a>
                                     <{/foreach}>
                                </span>
                            <{/if}>
                        </div>
                    </article>
                </div>
            <{/foreach}>
            <div class="anniu" onclick="javascript:switchMenu();">点击收起详情</div>
        </div>
        <div class="hdxq_con" id="openShare" style="display:none;">
            <div class="anniu" onClick="javascript:switchMenu();">点击展开详情</div>
        </div>
    </div>
<{/if}>
<!-- 图片弹出模态框 -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar" style="opacity:0;">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pswp__loading-indicator">
                <div class="pswp__loading-indicator__line"></div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip">
                    <a href="javascript:void(0);" class="pswp__share--facebook"></a>
                    <a href="javascript:void(0);" class="pswp__share--twitter"></a>
                    <a href="javascript:void(0);" class="pswp__share--pinterest"></a>
                    <a href="javascript:void(0);" download class="pswp__share--download"></a>
                </div>
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>
<div class="praise-comment" style="margin-bottom:3rem;" id="commentDiv">
    <div class="title_topic">其他小伙伴们说（<{$info.commentNum}>）</div>
    <div class="mypl_box"></div>
</div>
<!--<div class="fbpl_box">
    <div class="fbpl_btn">
        <input type="button" value="发表评论" class="fbpl_button"/>
    </div>
</div>
<div class="hyjf_box">
    <div class="jfgz">积分规则</div>
    <div class="hy_box">金卡会员</div>
    <div class="price">
        积分 <span class="rmb-num">1999</span>
    </div>
</div>-->
<div class="SignUp" style="border-top: 1px solid #e5e5e5;">
    <input type="text" placeholder="添加一条评论" id="addComment"  onclick="javascript:switchSendMenu()"/>
    <a href="javascript:void(0);" id="status"></a>
</div>
<div id="footer" class="footer" style="display:none;">
    <!--<textarea id="area" placeholder="添加一条评论"></textarea>-->
    <form id="commentForm">
        <input type="hidden" name="id" value="<{$info.id}>" />
        <input type="hidden" name="type" value="<{$smarty.const.OBJ_TYPE_ACTIVITY}>" />
        <input type="hidden" name="parentID" value="0" id="parentID" />
        <input type="hidden" id="nickname" value="" />
        <textarea  name="content" placeholder="添加一条评论" id="area"></textarea>
        <!--输入框有内容的时候调用fs_btn这个类名、没有内容时候没有类名-->
        <input id="btn" type="button" value="发送" onclick="javascript:switchSendMenu();"/>
    </form>
    <script>
        var text = document.getElementById("area");
        autoTextarea(text);// 调用
    </script>

</div>

<!--弹出框—取消报名-->
<div class="hint-box" id="cancelApply" >
    <div class="hint exchange_box">
        <h3 class="topic">操作确认</h3>
        <dl class="list" style="text-align: center;padding: 0;">一旦取消报名，无法再次报名该活动。<br/>请三思~</dl>
        <div class="btn_box">
            <button type="button" id="confirmCancel" class="button">我再考虑一会</button>
            <button type="button" id="confirmOk" class="button">取消报名</button>
        </div>
    </div>
</div>

<{include file="signBody.html"}>
</body>
</html>
<script src="<{$preStaticUrl}>Wap/js/photoswipe.min.js"></script>
<script src="<{$preStaticUrl}>Wap/js/photoswipe-ui-default.min.js"></script>
<script src="<{$preStaticUrl}>Wap/js/initPhotoSwipeFromDOM.js"></script>
<script>initPhotoSwipeFromDOM('.gallery');</script>
<script>
    fixUserHead();
    var infoShowFlag = 1;
    var GETCOMMENTDEFAULTLISTRUI = "<{U('Comment/loadMore')}>&type=<{$smarty.const.OBJ_TYPE_ACTIVITY}>&id=<{$info.id}>&pageSize=8";
    $(function(){
        $.getJSON(GETCOMMENTDEFAULTLISTRUI, {page: 1}, function(data){
            if(data.status!=0){
                $(".praise-comment .mypl_box").html('还没有任何评论');
                return false;
            }else{
                if(data.dataHTML.length>0){
                    $(".praise-comment").append(data.dataHTML);
                    fixUserHead();

                    $(".praise-comment .mypl_box").hide();
                }else{
                    $(".praise-comment .mypl_box").html('还没有任何评论');
                }
            }
        });

        $(".dyplx_box,.address_time,.man_nub,.hdxq_box").click(function(){
           offFocus();
        });

        var page=2;
        var loadFlag=1;
        $(window).scroll(function() {
            if ($(this).scrollTop() + $(window).height() + 20 >= $(document).height() && $(this).scrollTop() > 10) {
                //当前要加载的页码
                if(loadFlag){
                    loadFlag = 0;
                    $.getJSON(GETCOMMENTDEFAULTLISTRUI, {page: page}, function (data) {

                        if(data.status != 0){
                            layer.msg("数据获取失败，请稍后重试或联系管理员解决！");
                        }else{
                            ++page;
                            $(".praise-comment").append(data.dataHTML);
                            fixUserHead();
                            if(data.isPage) loadFlag=1;
                        }
                    });
                }
            }
        });

        $("#btn").on('click',function(){
            if($("#area").val() == null || $("#area").val() == "" ){
                return;
            }
            var data=$("#commentForm").serialize();
            $.post("<{u('Comment/addComment')}>",data,function(result){
                if(result.status == 1){
                    layer.msg(result.msg);
                    return false;
                }else if(result.status == 99){
                    window.location.href = result.uri;
                }else {

                    if(typeof result.tip!='undefined'){
                        layer.msg(result.tip,{shift:5,offset:$(window).height() * 0.8},function(){location.reload(); });
                    }else{
                        layer.msg("评论成功");
                        location.reload();
                    }
                }
            },'json')
        });

        $('.praise-comment').click(function(){
            switchSendMenu();
        });
        setInterval(changeBtnColor,1000);
    });

    function commentSelect(obj){
        //alert(.className);
        var $obj=$(obj);



        $("#parentID").val($obj.attr('data-id'));
        if($("#nickname").val() == $obj.attr('data-nick')){ return false; }

        $("#nickname").val($obj.attr('data-nick'));
        $("#area").val($("#area").val().replace(/@(.*): /, ''));
        $("#area").val('@'+$obj.attr('data-nick')+': '+$("#area").val());

    }

    function switchSendMenu(){
        var comment = document.getElementById('addComment');
        var footer = document.getElementById('footer');
        if(comment.style.display=='' || comment.style.display=='block'){
            comment.style.display = 'none';
            footer.style.display = 'block';
            $("#area").focus();
            var value=$("#area").val();
            $("#area").val('');
            $("#area").val(value);
        } else {
            comment.style.display = "";
            footer.style.display = "none";
        }
    }

    function switchInfoMenu(){
        var div1 = document.getElementById('close');
        var div2 = document.getElementById('open');
        if(div1.style.display == '' || div1.style.display == 'block'){
            div1.style.display = "none";
            div2.style.display = "block";
        }else{
            div1.style.display = "block";
            div2.style.display = "none";
        }
    }

    function offFocus(){
        var comment = document.getElementById('addComment');
        var footer = document.getElementById('footer');
        comment.style.display = "";
        footer.style.display = 'none';
    }

    function changeBtnColor(){
        if($("#area").val() == null || $("#area").val() == "" ){
            $("#btn").css("background","");
        }else{
            $("#btn").css("background","#37cbbb");

        }
    }

    function switchMenu(){
        var div1 = document.getElementById('closeShare');
        var div2 = document.getElementById('openShare');
        if(div1.style.display == '' || div1.style.display == 'block'){
            div1.style.display = "none";
            div2.style.display = "block";
        }else{
            div1.style.display = "block";
            div2.style.display = "none";
        }
    }

    //取消报名-取消
    $('#confirmCancel').click(function(){
        $('#cancelApply').hide();
    });
    //取消报名-确认
    $('#confirmOk').click(function(){
       $('#cancelApply').hide();
        //改变状态
        var id = "<{$info.id}>";
        $.getJSON("<{u('events/cancelRegistration')}>",{id:id},function(result){
            if(result.status == 0){
                $("#status").html("去报名").attr('href',"javascript:void(0)").css('background-color','#ccc');
            }
        })
    });
</script>